<template>
  <main-body class="main-body" style="font-size:12px">
    <!-- 搜索部分 -->
    <el-form :model="searchFormData" label-width="60px" slot="header">
      <el-row>
        <el-col :span="6">
          <el-form-item label="商户名:" class="custom-style">
            <el-input v-model="searchFormData.kword" placeholder="请输入商户名或商户号" size="small ">
              <el-button slot="append" icon="el-icon-search" @click="searchBtn"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格部分 -->
    <div slot="body">
      <el-table style="100%" :data="merchantList" border size="small">
        <el-table-column label="编号" width="50px" prop="ID" align="center"></el-table-column>
        <el-table-column label="商户号" prop="MerchantNo"></el-table-column>
        <el-table-column label="商户名" prop="MerchantName"></el-table-column>
        <el-table-column label="账户余额(元)" prop="Balance">
          <template slot-scope="scope">{{scope.row.Balance / 100}}</template>
        </el-table-column>
        <el-table-column label="状态" prop="State"></el-table-column>
        <el-table-column label="手续费" prop="FeeRate"></el-table-column>
        <el-table-column label="下发费(元)" prop="SingleFee"></el-table-column>
        <el-table-column label="电话" prop="Phone"></el-table-column>
        <el-table-column label="操作" prop="ID" width="210px">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="编辑" placement="top">
              <el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="谷歌密钥" placement="top">
              <el-button type="success" size="mini" circle>key</el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="添加白名单" placement="top">
              <el-button type="success" size="mini" circle>IP</el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="锁定" placement="top">
              <el-button class="iconfont icon-jinyong" type="success" size="mini" circle></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页部分 -->
    <el-pagination
      slot="pagination"
      :current-page.sync="currentPage"
      :page-size="searchFormData.limit"
      layout="total, prev, pager, next"
      :total="count"
    ></el-pagination>
  </main-body>
</template>

<script>
import MainBody from 'components/content/MainBody'
import { getMerchantList } from 'network/merchant'
export default {
  data() {
    return {
      //搜索的表单数据
      searchFormData: {
        kword: '',
        limit: 10,
        page: 1
      },
      //商户列表数据
      merchantList: [],
      count: 0,
      currentPage: 1
    }
  },
  created() {
    this.searchBtn()
  },
  methods: {
    async searchBtn() {
      const res = await getMerchantList(this.searchFormData)
      if (res.code == 0) {
        this.count = res.count
        this.merchantList = res.data
      }
      this.$message.error('搜索失败')
    }
  },
  computed: {},
  components: {
    MainBody
  }
}
</script>

<style lang="less">
.el-form-item {
  line-height: 32px;
  margin-bottom: 0;
}
.custom-style .el-form-item__label {
  font-size: 12px;
  line-height: 32px;
}
</style>